<template>
  <div :class="isTop?'header showBg':'header'">
    <div class="nav_tooltip">
        <div class="area flex-between-center">
            <div class="tooltip_left">
                <span @click="SetHome">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><defs>
                    <clipPath id="a">
                      <rect class="a" width="14" height="14"/></clipPath>
                    </defs>
                    <g class="b" transform="translate(0 0)">
                      <path class="c" d="M-58.021,87.724l3.943,2.064a.246.246,0,0,0,.359-.26l-.754-4.389a.261.261,0,0,1,.074-.223l3.189-3.1a.246.246,0,0,0-.136-.42l-4.4-.643a.238.238,0,0,1-.185-.136l-1.978-3.981a.248.248,0,0,0-.445,0l-1.966,3.993a.259.259,0,0,1-.185.136l-4.4.643a.243.243,0,0,0-.136.42l3.189,3.1a.249.249,0,0,1,.074.223l-.754,4.388a.246.246,0,0,0,.358.26l3.943-2.064a.186.186,0,0,1,.21-.012Zm0,0" transform="translate(65.118 -76.164)"/>
                    </g>
                  </svg>
                   设为首页
                </span>
                <span @click="AddFavorite">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><defs>
                    <clipPath id="a"><rect class="a" width="14" height="14"/></clipPath>
                  </defs><g transform="translate(35 -116.89)"><g transform="translate(-35 116.89)">
                    <g class="b" transform="translate(0 0)">
                      <path class="a" d="M-21.251,122.234-27.8,117.55a.526.526,0,0,0-.621,0L-35,122.234a.267.267,0,0,0,.162.486h1.323v7.288a.271.271,0,0,0,.27.27h3.239a.271.271,0,0,0,.27-.27v-4.049H-26.5v4.049a.271.271,0,0,0,.27.27h3.239a.271.271,0,0,0,.27-.27v-7.288H-21.4a.267.267,0,0,0,.148-.486Zm0,0" transform="translate(35.12 -116.863)"/></g>
                    </g>
                  </g>
                </svg>
                  加入收藏</span>
            </div>
            <div class="tooltip_right">
                <a href="/scw/#" target="_blank" class="nav-link newNav ">素材库 </a>
                <router-link   class="nav-link" tag="a" :to="{ name: 'join' }">加入我们
                </router-link>
                <a href="https://nc.xuw.com/index/newsa/detailsa?id=9" target="_blank">游戏授权</a>
            </div>
        </div>
    </div>
    <div class="navbar">
      <div class="area flex-between-center">
         <div class="navlogo">
            <img src="../assets/static/01.png" />
         </div>
         <ul class="navbar-nav flex-between-center">
            <li @click="navclick('index')" :class="navIs == 'index' ? '  active' : ' '">
              <router-link class="nav-link" tag="a" :to="{ name: 'index' }">首页
              </router-link>
            </li>
  
            <li @click="navclick('news')" :class="navIs == 'news' ? ' active ' : ' '">
              <router-link class="nav-link" tag="a" :to="{ name: 'news' }">新闻公告
              </router-link>
            </li>
            <li @click.self="navclick('download')" :class="
                navIs == 'download'
                  ? ' active dropdown'
                  : 'dropdown'
              ">
              <router-link class="nav-link dropdown-toggle" tag="a" :to="{ name: 'download' }">引擎下载<b class="caret"></b>
              </router-link>
              <ul class="dropdown-menu">
                <li v-for="(item,i) in enginedownlinkList" :key="i" class="">
                  <a :href="item.link" class="nav-link-inside" target="_blank">{{item.title}}</a>
                  <a :href="item.link" class="nav-link-inside fr" target="_blank">下载</a>
                </li>
              </ul>
            </li>
            <li @click="navclick('notes')" :class="navIs == 'notes' ? ' active ' : ' '">
              <router-link class="nav-link" tag="a" :to="{ name: 'notes' }">更新日志
              </router-link>
            </li>
            <li @click="navclick('technical')" :class="navIs == 'technical' ? ' active ' : ' '">
              <router-link class="nav-link" tag="a" :to="{ name: 'technical' }">技术文档
              </router-link>
            </li>
            <li @click="navclick('tutorial')" :class="navIs == 'tutorial' ? ' active ' : ' '">
              <router-link class="nav-link" tag="a" :to="{ name: 'tutorial' }">教程中心
              </router-link>
            </li>
            <li @click="navclick('purchase')" :class="navIs == 'purchase' ? ' active ' : ' '">
              <router-link class="nav-link" tag="a" :to="{ name: 'purchase' }">产品购买
              </router-link>
            </li>
            <li class="">
              <a href="https://geezf.net/#/" target="_blank" class="nav-link">在线购卡</a>
            </li>
      
            <li class=" ">
              <a href="https://bbs.geem2.com/" target="_blank" class="nav-link ">官方论坛</a>
            </li>
          </ul>
      </div>
         

    </div>
 
   
    <BackToTop :isShow='isTop' />
  </div>
</template>

<script>
import api from '@/api/index'
import BackToTop from '../components/BackToTop.vue'
export default {
  name: 'heard',
  components: {
    BackToTop
  },
  data () {
    return {
      enginedownlinkList:'',
      isTop: false,
      navIs: 'index',
    }
  },
  watch: {
    $route: {
      handler (val, oldval) {
        this.navIs = this.$router.currentRoute.name
        if (this.navIs == "technical") {
          this.isTop = true
        } else { 
          this.isTop = false
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {
    api.index().then(res => { 
      this.enginedownlinkList=res.data.data.enginedownlinkList
    })
    window.addEventListener("scroll", this.scroll)
  },
  methods: {

    SetHome() {
      var url = location.href
      var obj=window
      try{
        obj.style.behavior='url(#default#homepage)';
        obj.setHomePage(url);
        }catch(e){
          if(window.netscape){
          try{
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
          }catch(e){
            this.$message("抱歉，此操作被浏览器拒绝！\n\n请在浏览器地址栏输入“about:config”并回车然后将[signed.applets.codebase_principal_support]设置为'true'");
          }
          }else{
          this.$message("抱歉，您所使用的浏览器无法完成此操作。\n\n您需要手动将【"+url+"】设置为首页。");
          }
      }
    },
    AddFavorite() {
      var url = location.href
      var title=document.title
      try {
        window.external.addFavorite(url, title);
        this.$message.success("收藏成功");
        }
        catch (e) {
          try {
            window.sidebar.addPanel(title, url, "");
             this.$message.success("收藏成功");
          }
          catch (e) {
            this.$message("抱歉，您所使用的浏览器无法完成此操作。\n\n加入收藏失败，请进入新网站后使用Ctrl+D进行添加");
          }
        }
      },
    navclick (e) {
      this.navIs = e
    },

    scroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 100) {
        this.isTop = true
      } else {
        this.isTop = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.newNav {
  position: relative;
  img {
    position: absolute;
    right: -13px;
    top: 0px;
  }
}
</style>
